<template>
  <div 
    :class="[
      'job-card bg-white rounded-lg shadow-sm mb-4 p-4 border cursor-pointer transition-all duration-300',
      active ? 'border-blue-500' : 'border-gray-100 hover:shadow-md hover:-translate-y-1'
    ]"
    @click="$emit('click')"
  >
    <div class="flex justify-between items-start mb-3">
      <div>
        <div class="flex items-center mb-2">
          <span v-if="job.urgent" class="bg-orange-100 text-orange-500 text-xs px-2 py-0.5 rounded mr-2">急聘</span>
          <h3 class="font-medium text-lg">{{ job.title }}</h3>
        </div>
        <div class="text-blue-600 font-medium">{{ job.salary }}</div>
      </div>
    </div>
    
    <div class="flex items-center text-sm text-gray-500 mb-3 space-x-3">
      <span>{{ job.experience }}</span>
      <span>{{ job.education }}</span>
      <span>{{ job.type }}</span>
    </div>
    
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <div class="w-8 h-8 bg-gray-100 rounded flex items-center justify-center mr-2">
          <i class="ri-building-line text-gray-500"></i>
        </div>
        <span class="text-sm">{{ job.company }}</span>
      </div>
      <div class="text-xs text-gray-400">{{ job.location }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Job } from '../types'

interface Props {
  job: Job
  active?: boolean
}

defineProps<Props>()
defineEmits<{
  click: []
}>()
</script>
